<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">

    <title>申请售后</title>
    <link rel="stylesheet" href="../css/base.css">
    <script src="../js/jquery-1.8.3.min.js"> </script>
    <script src="../js/public.js"></script>
    <script src="../js/exif.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: #fff;
    }
    .ti{
        color: #5f3104;
        padding: 0 .2rem;
        box-sizing: border-box;
        font-size: 12px;
        line-height: .88rem;
        background: #f2f2f2;
    }
    .tk-obj{
        padding: 0 .2rem;
        box-sizing: border-box;
        line-height: .88rem;
        position: relative;
    }
    .sele{
        position: absolute;
        height: .88rem;
        top: 0;
        left: .2rem;
        width: 90%;
        opacity: 0;
    }
    .triangle-down {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #999;
        display: inline-block;
        margin-top: .05rem;
        position: absolute;
        right: .2rem;
        top: 0.35rem;
    }
    .money{
        padding: 0 .2rem;
        box-sizing: border-box;
    }
    .footer-btn{
        background: #5f3104;
        height: .64rem;
        border-radius: .04rem;
        line-height: .64rem;
        color: #fff;
        text-align: center;
        width: 80%;
        margin: 20px auto;
    }

    .upload_box {
        width: 100%;
        /* margin: 1em auto; */
    }
    .Publish_goods textarea{
        font-size: 14px;
    }
    body{
        background: #fff;
    }

    .upload_drag_area {
        display: inline-block;
        width: 60%;
        padding: 4em 0;
        margin-left: .5em;
        border: 1px dashed #ddd;
        background: #fff url(drag.png) no-repeat 20px center;
        color: #999;
        text-align: center;
        vertical-align: middle;
    }

    .upload_drag_hover {
        border-color: #069;
        box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5);
        color: #333;
    }

    .upload_preview {
        background-color: #fff;
        overflow: hidden;
        _zoom: 1;
        float: left;
    }

    .upload_append_list {
        /* height: 300px; */
        margin-right: 8px;
        width: 60px;
        height: 60px;
        float: left;
        position: relative;
    }

    .upload_delete {
        margin-left: 2em;
        background: url('../img/删除@2x.png') no-repeat center;
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        width: 12px;
        height: 12px;
        background-size: contain;
    }



    .upload_submit_btn {
        display: none;
        height: 32px;
        font-size: 14px;
    }

    .upload_loading {
        height: 250px;
        background: url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;
    }

    .upload_progress {
        display: none;
        padding: 5px;
        border-radius: 10px;
        color: #fff;
        background-color: rgba(0, 0, 0, .6);
        position: absolute;
        left: 25px;
        top: 45px;
    }
    .upimg{
        width: 60px;
        height: 60px;
    }
    .tis{
        font-size: 12px;
        color: #333;
    }
</style>
<body>
    <div class="ti">
        退款类型
    </div>
    <div class="tk-obj">
        <div class="tis">
            我要退款和退货
        </div>
    </div>
    <div id="content"  class="show" style="overflow:hidden;">
        <div>
            <p class="ti">退款金额</p>
            <p style="padding-left: .2rem;line-height: 40px;box-sizing: border-box;color: #333;" id="price">1000</p>
        </div>
        <div>
            <p class="ti">退款说明</p>
            <p>
                <input type="text" id="reason" style="border: none;padding: 0 .2rem;box-sizing: border-box; width: 100%;line-height: 40px;" placeholder="请填写退款说明">
            </p>
        </div>
        <div class="ti" style="margin-bottom: 20px;">
            上传凭证
        </div>
        <div class="demo" style="overflow: hidden;padding: 0 5px;margin-bottom: 20px; box-sizing: border-box;">
            <div class="upload_box">
                <div class="upload_main">
                    <div id="preview" class="upload_preview"></div>
                    <div class="upload_choose" style="float: left;position: relative;">
                        <img src="../img/addcopy@2x.png" alt="" style='width:60px;height:60px;display: block;' id="add_img" >
                        <input id="fileImage" type="file"  style="width: 60px;height: 60px;position: absolute;top: 0;opacity: 0;" onchange="selectFileImage(this)"/>
                    </div>
                </div>
                <div class="upload_submit">
                    <button type="button" id="fileSubmit" class="upload_submit_btn">确认上传图片</button>
                </div>
            </div>
        </div>
        <div style="font-size: 12px;color:#5F3104;padding: 0 5px;">
            请耐心等待卖家的审核哟
        </div>
    </div>
    <!--<div id="tuihuo" style="display: block;">-->
        <!--<div class="ti">物流单号</div>-->
        <!--<div>-->
            <!--<input type="text" placeholder="请填写物流单号" style="border: none;width: 100%;line-height: 40px;padding: 0 .2rem;box-sizing: border-box；">-->
        <!--</div>-->
    <!--</div>-->
  <!--  <div class="ti">
        退款金额
    </div>-->
<!--    <div class="money">
        100
    </div>
<div class="ti">
    退款说明
</div>
<div>
    <input id="inp" style="width: 100%;line-height: .44rem;" type="text" placeholder="请填写退款说明">
</div>-->
<!--
<div>
    上传凭证
</div>
<div>
    <p>晒图</p>
</div>
-->


<div class="footer-btn" onclick="tjsq()">
    提交申请
</div>
    <script>
        var oid = GetQueryString('oid');
        var price = GetQueryString('price');
        $("#price").text(price);
        function tjsq () {
            var reson = $("#reason").val();
            if(isNull(reson)){
                alert("请填写退款说明");
                return false;
            }
            var imgs = '';
            for(var i = 0;i< $(".upimg").length;i++){
                imgs+=","+$(".upimg").attr("imgurl");
            }
            imgs = imgs.replace(/,/,'');



            //提交申请
            $.ajax({
                url:base_url+"ZITAOHUI/applyforAfterSale",
                data:{
                    order_id:oid,
                    reason:reson,
                    images:imgs
                },
                dataType:"json",
                success:function (data){
                    if(data.code == 1){
                        alert("提交成功");
                        window.history.back();
                    }else{
                        alert("提交失败");
                    }
                }
            })
        }
        function selectFileImage(fileObj) {

            var $len = $("#preview .img-div").length;
            if($len == 3){
                alert("对不起，最多可以上传3张哦！");
                return false;
            }

            var obj = fileObj;
            var file = fileObj.files['0'];

            var $par = $(this).parent().find(".upload_preview");
            var Orientation = null;

            if (file) {


                //获取照片方向角属性，用户旋转控制
                EXIF.getData(file, function () {
                    // //alert(EXIF.pretty(this));
                    EXIF.getAllTags(this);
                    ////alert(EXIF.getTag(this, 'Orientation'));
                    Orientation = EXIF.getTag(this, 'Orientation');
                    //return;
                });

                var oReader = new FileReader();
                oReader.onload = function (e) {
                    //var blob = URL.createObjectURL(file);
                    //_compress(blob, file, basePath);
                    var image = new Image();
                    image.src = e.target.result;
                    image.onload = function () {
                        var imgWidth = this.width;
                        var imgHeight = this.height;

                        // 控制上传图片的宽高
                        if (imgWidth > imgHeight && imgWidth > 750) {
                            imgWidth = 750;
                            imgHeight = Math.ceil(750 * this.height / this.width);
                        } else if (imgWidth < imgHeight && imgHeight > 1334) {
                            imgWidth = Math.ceil(1334 * this.width / this.height);
                            imgHeight = 1334;
                        }
                        var canvas = document.createElement("canvas"),
                            ctx = canvas.getContext('2d');
                        canvas.width = imgWidth;
                        canvas.height = imgHeight;
                        if (Orientation && Orientation != 1) {
                            switch (Orientation) {
                                case 6:     // 旋转90度
                                    canvas.width = imgHeight;
                                    canvas.height = imgWidth;
                                    ctx.rotate(Math.PI / 2);
                                    // (0,-imgHeight) 从旋转原理图那里获得的起始点
                                    ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                                    break;
                                case 3:     // 旋转180度
                                    ctx.rotate(Math.PI);
                                    ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
                                    break;
                                case 8:     // 旋转-90度
                                    canvas.width = imgHeight;
                                    canvas.height = imgWidth;
                                    ctx.rotate(3 * Math.PI / 2);
                                    ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
                                    break;
                            }
                        } else {
                            ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
                        }
                        base64 = canvas.toDataURL("image/jpeg", 0.8);

                        var $par = $(obj).parent().siblings(".upload_preview");
                        var newsIndex = base64.indexOf(",");
                        var news = base64.substr(parseInt(newsIndex + 1));
                        console.log(news);
                        $.ajax({ //上传头像
                            type: "post",
                            url: base_url+"ZITAOHUI/upload/image",
                            data:{
                                imageData:news
                            },
                            dataType: "json",
                            success: function (data) {
                                //////console.log(data);
                                if (data.code == 1) {
                                    console.log("上传成功");
//                                    _imgarr.push(
//                                        {
//                                            id: data_id,
//                                            url: data.fileUrl
//                                        }
//                                    );
                                    var _url = data.extend.msg.fileUrl;
//                                saveHeaImg(new_url);
                                    $par.append('<div class="img-div" style="float: left;position: relative;margin-right: 10px;"><img class= "upimg" imgurl="' + _url + '" src=' + base64 + '><img src="../img/del@2x.png" onclick="delImg(this)" style="width: 12px;position: absolute;top: 2px;right: 0;"></div>');

                                } else{
                                    alert("上传失败");
                                }
                            },
                            error: function (error) {

                            }
                        })
                        ////console.log(news);

                    };
                };
                oReader.readAsDataURL(file);
            }
        }
        function delImg (obj){
            $(obj).parent().remove();
        }
    </script>
</body>
</html>